<template>
	<view class="page friend-add">
		
		<view class="header">
			<view class="basj">
				<image @click="gobacks" src="/static/dazi/bak.png" mode=""></image>
				<text class="title">添加好友</text>
			</view>
		
		</view>
		
		
		<view class="search-bar">
			<uni-search-bar v-model="searchText" :focus="true" @confirm="onSearch()" @cancel="onCancel()"
				placeholder="用户名/昵称"></uni-search-bar>
				<view class="myacs" v-if="issaveacc==null">
					我的账号: 25552
				</view>
				
		</view>
		
		<view class="user-items" v-if="issaveacc==true	">
	
			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
				<view v-for="(user) in users" :key="user.id" v-show="user.id != userStore.userInfo.id">
					<view class="user-item">
						<head-image :id="user.id" :name="user.nickName"
							:online="user.online" :url="user.headImage"
							:size="100">
            </head-image>
						<view class="user-name" @click="onShowUserInfo(user)">{{ user.nickName}}</view>
            <view class="chat-tag">
              <uni-tag v-if="user.sex==0" class="iconfont icon-man-arrow" style="background: #10AEFF; border: #999" disabled
                       :text="'&nbsp;&nbsp;' + user.age" size="medium" type="primary"></uni-tag>
              <uni-tag v-if="user.sex==1" class="iconfont icon-girl-arrow" style="background: #F76260; border: #999" disabled
                       :text="'&nbsp;&nbsp;' + user.age" size="mini" type="primary"></uni-tag>
            </view>


						<view class="user-btns">
<!--							<button type="primary" v-show="!isFriend(user.id)" size="mini"-->
<!--								@click.stop="onAddFriend(user)">加为好友</button>-->
<!--							<button type="default" v-show="isFriend(user.id)" size="mini" disabled>已添加</button>-->

<!--              <button type="default" v-show="!isFriend(user.id) && user.friendRequestSent" size="mini"-->
<!--                      @click.stop="onAddFriend(user)">已申请-->
<!--              </button>-->

<!--              <button type="primary" style="background: #2782D7" v-show="!isFriend(user.id) && !user.friendRequestSent" size="mini"-->
<!--                      @click.stop="onAddFriend(user)">加为好友-->
<!--              </button>-->

<!--              <button type="default" v-show="isFriend(user.id)" size="mini" disabled>已添加</button>-->

						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class=" akuhw" v-if="issaveacc==false">
			<image class="anwow" src="/static/dazi/404.png" mode="heightFix"></image>
			<view class="yish">
				用户不存在
			</view>
		</view>
		
		
				<alert ref="globalAlert"></alert>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: "",
				users: [],
				issaveacc:null,//是否搜索出来账号
			}
		},
		methods: {
			gobacks() {
			
				// #ifdef H5
				history.back();
				// #endif
			
				// #ifdef APP
				uni.navigateBack()
				// #endif
			
			},
			onCancel() {
				uni.navigateBack();
			},
			onSearch() {
				this.$http({
					url: "/user/findByName?name=" + this.searchText,
					method: "GET"
				}).then((data) => {
					console.log(data)
					this.users = data;
					this.issaveacc = true
				}).catch(e=>{
					console.log(e)
				
						this.issaveacc = false
						this.$refs.globalAlert.show({
							type: 'error',
							title: '提示',
							content: '好友不存在',
							duration: 4000
						})
				})
			},
			onAddFriend(user) {
				this.$http({
					url: "/friend/apply?friendId=" + user.id,
					method: "POST"
				}).then((data) => {
					
          user.friendRequestSent = true
					// let friend = {
					// 	id: user.id,
					// 	nickName: user.nickName,
					// 	headImage: user.headImage,
					// 	online: user.online
					// }
					// this.friendStore.addFriend(friend);
					// uni.showToast({
					// 	title: "添加成功，对方已成为您的好友",
					// 	icon: "none"
					// })
				})
			},
			onShowUserInfo(user) {
				uni.navigateTo({
					url: "/pages/common/user-info?id=" + user.id
				})
			},
			isFriend(userId) {
				let friends = this.friendStore.friends;
				let friend = friends.find((f) => f.id == userId);
				return !!friend;
			}
		}
	}
</script>

<style scoped lang="scss">
	.yish{
		color: #837487;
		font-size: 28rpx;
	}
	.akuhw{
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.anwow{
	
			width: 320rpx;
			height: 300rpx;
		
	}
	.myacs{
		color: #2A222F;
		font-size: 24rpx;
		text-align: center;
	}
	.uni-searchbar__box{
		background-color: #fff !important;
	}
	
	.basj {
		display: flex;
		align-items: center;
		height: 60rpx;
	
		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}
	
		.title {
			margin-left: 10rpx;
			color: #2A222F;
			font-size: 40rpx;
		}
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		padding: 5px 20rpx;
		// background-color: #f8f8f8;
		// line-height: 50px;
		// font-size: 30rpx;
		letter-spacing: 2rpx;
		/* 字母间距 */
		font-weight: 600;
		// border: #dddddd solid 1px;
	
		.btn-side {
			position: absolute;
			line-height: 60rpx;
			font-size: 28rpx;
			cursor: pointer;
	
			&.right {
				right: 30rpx;
			}
		}
	}
	
	.friend-add {
		position: relative;
		border: #dddddd solid 1px;
		display: flex;
		flex-direction: column;

		.search-bar {
			background: white;
		}
		.user-items{
			position: relative;
			flex: 1;
			overflow: hidden;
			.user-item {
				height: 120rpx;
				display: flex;
				margin-bottom: 1rpx;
				position: relative;
				padding: 0 30rpx ;
				align-items: center;
				background-color: white;
				white-space: nowrap;

				.user-name {
					flex:1;
					padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
					line-height: 60rpx;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.scroll-bar {
				height: 100%;
			}
		}

	}
</style>